<%@ page contentType="text/html;charset=UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="/favicon.ico">
    <link rel="Shortcut Icon" href="/favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/element/index.css">
    <!--[if IE 6]>

    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>消费类别</title>

    <style>
        .fail .layui-layer-content {
            background-color: brown;
            color: #eee;
            width: 400px;
            height: 30px;
            text-align: center;
        }

        .succeed .layui-layer-content {
            background-color: #0061A8;
            color: #eee;
            width: 400px;
            height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <nav class="breadcrumb" v-cloak style="height: 100%">
        <div class="l" style="margin-top: 30px; margin-left: 40px; height: 100%;">
            <span style="font-size: 24px; margin: 8px;">历史数据结转</span>
            <div class="block">
                <el-date-picker
                        v-model="nf"
                        type="year"
                        placeholder="选择年"
                        format="yyyy"
                        value-format="yyyy"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </div>
            <a class="btn btn-success radius l" style="font-size: 22px;margin-top:20px; padding: 25px; height: 50px; line-height: 0;" @click="fBegin()" title="数据结转" v-loading.fullscreen.lock="fullscreenLoading">数据结转</a>
        </div>
    </nav>

</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="static/axios.min.js"></script>
<script type="text/javascript" src="./static/vue"></script>
<script src="static/element/index.js"></script>
<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            nf: '',
            fullscreenLoading: false,
            pickerOptions: {
                disabledDate: time => {
                    const timeYear = time.getFullYear()
                    const date = new Date()  // 获取当前时间
                    const year = date.getFullYear() // 转化当前年度

                    return year <= timeYear;
                }
            }
        },
        methods: {
            fBegin() {
                if (this.nf.length === 0){
                    layer.msg('<span style="font-size:24px; line-height: 30px">请选择结转年份!</span>', {time: 1500, skin: 'fail'});
                    return
                }
                let self = this
                let params = new URLSearchParams();
                params.append('CMD', "BU");
                params.append('VALUE01', this.nf);           //--
                this.fullscreenLoading = true
                axios.post('/f_wscl/com2', params)
                    .then(function (res) {
                        let {db1} = res.data
                        if (db1[0].VALUE01 === 'ZZ01') {
                            layer.msg('<span style="font-size:24px; line-height: 30px">' + db1[0].VALUE02 + '</span>', {time: 2000, skin: 'fail'});
                        } else if (db1[0].VALUE01 === 'ZZ00') {
                            layer.msg('<span style="font-size:24px; line-height: 30px">数据结转完毕!</span>', {time: 2000, skin: 'succeed'}, function () {
                                let index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                            });
                        }
                    })
                    .catch(function () {
                        layer.msg('<span style="font-size:24px; line-height: 30px">数据结转失败!</span>', {time: 1500, skin: 'fail'});
                    })
                    .finally(function () {
                        self.fullscreenLoading = false
                    });
            }
        }
    });

</script>
</body>
</html>
